<!--首页汽车列表-->
<template>
  <div class="car_list">
    <ul class="tab_btn">
      <li @click.stop="GoTab" val="val1" class="car_tab_fous">
        <a>好车推荐</a>
      </li>
      <li @click.stop="GoTab" val="val2">
        <a>今日超值</a>
      </li>
      <li @click.stop="GoTab" val="val3">
        <a>降价急售</a>
      </li>
    </ul>
    <ul class="work_list">
      <li v-for="item in carList">
        <router-link :to="{name:'Commods',params:{workid:item.workid}}">
          <div class="imgs">
            <img src="../../static/image/qiche_test.jpg" alt="">
          </div>
          <div class="info">
            <p class="name">{{item.name}}</p>
            <p class="yeat_gl">{{item.yaers}}</p>
            <p class="jiage"><span>{{item.xj}}万</span><s>{{item.yj}}万</s></p>
          </div>
        </router-link>
      </li>
    </ul>
    <router-link to="/BuyACar" class="all_car_btn">查看全部车型</router-link>
  </div>
</template>
<style>

</style>
<script>
  //  import Router from '../router/index'

  export default{
    data(){
      return {
        msg: 'hello vue',
        carList: [
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '1'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '2'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '3'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '4'},
          {name: '五菱宏光 2014款 1.2L S标准型', yaers: '2015年/1.6万公里', xj: '3.5', yj: '5.08', workid: '5'}
        ],
        list_tab: [],
        scrolled: false
      }
    },
    components: {

    },
    methods: {
      handleScroll () {
        this.scrolled = window.scrollY > 0;

      },
      GoTab: function (e) {
        let dom = $(e.currentTarget)
        let domVal = dom.attr('val')
        $('.tab_btn li').removeClass('car_tab_fous')

        if(domVal=='val1'){
            console.log(domVal)
        }else if(domVal == 'val2'){
          console.log(domVal)
        }else if(domVal=='val3'){
          console.log(domVal)
        }
        dom.addClass('car_tab_fous')
      }
    },
    created: function () {
      window.addEventListener('scroll', this.handleScroll);
    }
  }
</script>
